
<html>

  <head>
    <meta charset="utf-8">
    <title id='title'>iphone</title>
    <link id='icon' rel="shortcut icon" href="lib/apple.png">
    <link rel="stylesheet" href="lib/material/material-components-web.min.css">
    <link rel="stylesheet" href="lib/material/material-icons.css">
    <link rel="stylesheet" href="lib/material/material-icons-outlined.css">
    <link rel="stylesheet" href="lib/material/material-icons-round.css">
    <link rel="stylesheet" href="lib/material/material-icons-sharp.css">
    <link rel="stylesheet" href="lib/material/material-icons-two-tone.css">
    <script src="lib/material/material-components-web.min.js"></script>
    <script src="lib/jswrt/py_full.js"></script>
  </head>

<body>
<div style='width: 320px; padding: 10px; border: 1px solid gray; border-radius: 30px; background-color: black; margin: 0 auto; box-shadow: -4px 15px pink, 4px 15px pink;'>
  <div style='height: 40px; color: gray; margin: 0 12px;'></div>
  <div style='width: 320px; height:480px; frameborder: no; border:0; marginwidth:0; marginheight:0; scrolling:auto; allowtransparency:yes'>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed" style="flex: 0 1 auto; width: 320px">  
      <div class='mdc-top-app-bar__row'>
        <header class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <!-- <i class="material-icons">add</i> -->
          <div style="padding-left:10px" class="mdc-top-app-bar__title" >Flutter</div>
        </header>
        <header class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </header>
      </div>
    </header>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:#ffffff; background-image: url(1.png); background-repeat: no-repeat; background-size: cover;">
      <h3 class='change' align = 'center'>Welcome to Flutter world!</h3>
      <a href="main.html" style="text-decoration: none;">
        <button class='button'>
          <div class="change" font-weight="bold">GO!</div>
        </button>
      </a>
    </div>
  </div> -->
  <div style='height: 4px'></div>
  <div style='width: 35px; height: 35px; border-radius: 35px; border: 2px solid pink; margin: 0 142.5px;'></div>
</div>
</body>

<style>
.button {
  display: block;
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #87cefa;
  background: white;
  border: 2px solid pink;
  border-radius: 8px;
  box-shadow: 0 9px pink;
}
 
.button:hover {background-color: #dcdcdc}
 
.button:active {
  background-color: pink;
  box-shadow: 0 5px red;
  transform: translateY(4px);
}

.change{
  background: linear-gradient(to bottom, red , blue); 
  -webkit-background-clip: text; 
  color:transparent
}

/* h3{
  text-align:center;
  margin: 0;
  text-shadow: -2px -2px white, 1px 1px;
} */

</style>

</html>
